import { onMounted, onUnmounted, ref } from 'vue'

interface ScriptOptions {
	src: string
}

export function useScript(opts: ScriptOptions) {
	const isLoading = ref(false)
	const error = ref(false)
	const success = ref(false)
	let script: HTMLScriptElement

	const promise = new Promise((resolve, reject) => {
		onMounted(() => {
			script = document.createElement('script')
			script.type = 'text/javascript'
			script.onload = function () {
				isLoading.value = false
				success.value = true
				error.value = false
				resolve('')
			}

			script.onerror = function (err) {
				isLoading.value = false
				success.value = false
				error.value = true
				reject(err)
			}

			script.src = opts.src
			document.head.appendChild(script)
		})
	})

	onUnmounted(() => {
		script && script.remove()
	})

	return {
		isLoading,
		error,
		success,
		toPromise: () => promise
	}
}
